<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript">
      /*
       * 创建一个数组
       */
      var arr = ["孙悟空", "猪八戒", "沙和尚"];

      /*
       * push()
       *  - 该方法可以用来向数组的末尾添加新的元素,并返回数组的新的长度
       */

      //console.log(arr);

      var result = arr.push("唐僧", "白骨精", "蜘蛛精");

      //console.log(arr);
      //console.log("result = "+result);

      /*
       * pop()
       *  - 用来删除并返回数组的最后一个元素
       *  - 元素删除以后，会自动修正数组的长度
       */
      result = arr.pop();
      result = arr.pop();

      //console.log(arr);
      //console.log("result = "+result);

      /*
       * unshift()
       *  - 向数组的最前边添加元素，并返回新的长度
       */
      result = arr.unshift("牛魔王", "铁扇公主");

      console.log(arr);
      //console.log("result = "+result);

      /*
       * shift()
       *  - 删除数组最前边的元素，并返回被删除的元素
       *  - 删除完元素以后，会自动调整数组的长度
       */
      result = arr.shift();
      result = arr.shift();

      console.log(arr);
      console.log("result = " + result);
      console.log(arr.length);

      /*
       * slice()
       *  - 可以用来截取数组中的指定元素
       *  - 参数：
       *      第一个参数，截取开始的位置(包括开始的位置)
       *      第二个参数，截取结束的位置(不包括结束的位置)
       *  - 该方法不会影响到原数组，而是将截取到的内容封装为一个新的数组返回
       *  - 可以传递一个负数作为参数，如果是负数，则从后往前数
       *      -1 表示 倒数第一
       *      -2 表示 倒数第二
       *  - 如果省略第二个参数，则从开始位置一直截取到最后
       */

      var result = arr.slice(1, 3);

      result = arr.slice(1, -2);

      result = arr.slice(1);

      //console.log(result);

      /*
       * splice()
       *  - 可以用来删除数组中的元素，并添加新元素
       *  - 它会影响到原数组，一旦执行原数组中的元素将会被删除
       *  - 参数：
       *      第一个参数，开始位置的索引
       *      第二个参数，表示删除的个数
       *      第三个参数，这个方法还可以传递多个参数
       *          在第三个参数以后，可以跟多个元素作为参数，
       *          这些元素将会被插入到开始位置之前的位置
       *  - 它会将被删除的元素作为返回值返回
       *
       */

      arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];

      //result = arr.splice(0,1);

      //牛魔王替换 索引为0的元素
      //result = arr.splice(0,1,"牛魔王");

      //arr.splice(2,1,"牛魔王","红孩儿","二郎神");

      arr.splice(2, 0, "牛魔王", "红孩儿", "二郎神");

      console.log(arr);

      /*
       * join()
       *  - 可以将数组中的所有的元素连接为一个字符串
       *  - 该方法可以接收一个字符串作为参数，这个字符串将会将会作为连接符来连接元素
       *      如果不传，默认使用,
       */
      arr = ["孙悟空", "猪八戒", "沙和尚"];

      result = arr.join("@-@");

      //console.log(result);

      /*
       * 创建一个数组
       */

      var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精", "蜘蛛精"];

      /*
       * 遍历数组
       *  - 遍历数组就是指将数组中的每一个元素都获取到
       *  - 一般情况下遍历数组都是使用for循环来遍历
       */

      for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
      }

      /*
       * 也可以使用forEach()来遍历数组
       *  forEach()中需要一个函数作为参数
       *  - 像这种由我们定义而不由我们调用的函数，我们称为回调函数
       *  - forEach()中的回调函数，由浏览器调用，
       *      数组中有几个元素函数就会被调用几次，
       *      每次遍历到一个元素都会调用一次函数，浏览器会通过实参的形式来将遍历到内容传递进函数
       *  - 浏览器在调用回调函数传递了三个实参：
       *      第一个参数：正在遍历的元素
       *      第二个参数：正在遍历的元素的索引
       *      第三个参数：正在遍历的数组对象
       *
       *  - forEach()方法不支持IE8及以下的浏览器，所以如果需要兼容IE8则不要使用
       *
       */
      arr.forEach(function (value, index, obj) {
        console.log(
          "value = " + value + "  index = " + index + " obj = " + obj
        );
      });
    </script>
  </head>
  <body></body>
</html>
